<!DOCTYPE html>
<html>
<head>
    <title>预算统计</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="description" content="木兰湾管理系统">
    <script type="text/javascript" src="../../static/include/header-css.js"></script>
</head>
<body>
<!--导航-->
<div class="weui-tab" style="height:32px;"   id="budgetTab">
    <div class="weui-tab-nav">
        <a href="javascript:budgetDetail('MONTHLY');" class="weui-navbar__item weui-nav-green"> 本月预算 </a>
        <a href="javascript:budgetDetail('YEARLY');" class="weui-navbar__item weui-nav-green"> 今年预算</a>
    </div>
    <input type="text" style="display:none;" name='type' id="type" value="2"/>
</div>

<!--列表数据显示-->
<label id="achieveMonthInfo"></label>
<div id="dataContent"></div>

<div class="button_sp_area" align="center">
    <a href="javascript:scroll(0,0);" class="weui-btn weui-btn_mini weui-btn_primary">返回顶部</a>
</div>
<br>
<script type="text/javascript" src="../../static/include/footer-js.js"></script>
<!--顶部导航使用-->
<script type="text/javascript" src="../../static/js/iscroll-lite.min.js"></script>
<script>
    $(function() {
        var period = getQueryVariable('period');
        if(period==null){
            period = 'MONTHLY';
        }
        var index=0;
        if(period == 'YEARLY'){
            index=1;
        }
        $('#budgetTab').tab({defaultIndex:index,activeClass:"bg-green"});

        budgetDetail(period);
    });
    function budgetDetail(period) {
        var url='/budget/getInfoList?period='+period;
        doAjax(null,url,'GET',false,function(data){
            var html='';
            for (var i = 0; i < data.length; i++) {
                var od='--';
                var consumeAmount='--';
                var name =data[i].name;
                if(data[i].occurDate){
                    od=data[i].occurDate;
                    consumeAmount=data[i].ncAmount+data[i].bcAmount+data[i].trAmount;
                    //实际花费和预算差值
                    var ca = consumeAmount - data[i].amount;
                    var csStr=consumeAmount;
                    if(ca>0){
                        csStr=formatMoneyWithSymbal(consumeAmount)+'<font color="red">(+'+ca.toFixed(2)+')</font>';
                    }else if(ca<0){
                        csStr=formatMoneyWithSymbal(consumeAmount)+'<font color="green">(-'+(0-ca).toFixed(2)+')</font>';
                    }else{
                        csStr=formatMoneyWithSymbal(consumeAmount);
                    }
                    name='★'+name;
                    consumeAmount=csStr;
                }else{
                    if(data[i].bindFlow){
                        name='★<font color="red">'+data[i].name+'</font>';
                        var ld = data[i].leftDays;
                        if(ld){
                            var lds = formatDays(ld);
                            od = '<font color="red">未完成(剩余：'+lds+')</font>';
                        }else{
                            od = '<font color="red">未完成</font>';
                        }
                    }else{
                        od = '无需完成';
                    }
                }
                var row = {
                    id:i+1,
                    name:name,
                    amount:formatMoneyWithSymbal(data[i].amount),
                    typeName:data[i].typeName,
                    periodName:data[i].periodName,
                    occurDate:od,
                    consumeAmount:consumeAmount
                };
                html+='<div class="weui-form-preview">';
                html+='    <a class="weui-cell  weui-cell_access weui-cell_example" href="#">\n';
                html+='        <div class="weui-cell__hd"><img src="../../static/image/budget.png"></div>\n';
                html+='        <div class="weui-cell__bd">\n';
                html+='<label class="weui-form-preview__label">'+name+'</label>';
                html+='        </div>\n';
                html+='        <div class="weui-cell__ft">预算金额'+formatMoneyWithSymbal(data[i].amount)+'</div>\n';
                html+='    </a>\n';
                html+='    <div class="weui-form-preview__bd">\n';
                html+='        <div class="weui-form-preview__item">\n';
                html+='            <label class="weui-form-preview__label">预算类型</label>\n';
                html+='            <span class="weui-form-preview__value mulanbay-dark-font">'+data[i].typeName+'</span>\n';
                html+='        </div>\n';
                html+='        <div class="weui-form-preview__item">\n';
                html+='            <label class="weui-form-preview__label">周期类型</label>\n';
                html+='            <span class="weui-form-preview__value mulanbay-dark-font">'+data[i].periodName+'</span>\n';
                html+='        </div>\n';
                html+='        <div class="weui-form-preview__item">\n';
                html+='            <label class="weui-form-preview__label">完成时间</label>\n';
                html+='            <span class="weui-form-preview__value mulanbay-dark-font">'+od+'</span>\n';
                html+='        </div>\n';
                html+='        <div class="weui-form-preview__item">\n';
                html+='            <label class="weui-form-preview__label">实际花费金额</label>\n';
                html+='            <span class="weui-form-preview__value mulanbay-dark-font">'+consumeAmount+'</span>\n';
                html+='        </div>\n';
                html+='</div>\n';
                html+='<br>\n';
            }
            setElementInnerHTML('dataContent',html);
        });
    }
</script>
</body>
</html>